<!-- IconFont.vue -->
<template>
  <!-- 动态绑定 iconfont 的 class -->
  <i :class="iconClass" :style="iconStyle"></i>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: 16 // 默认图标大小
  },
  color: {
    type: String,
    default: '#2ac8fb' // 默认图标颜色
  }
});

const iconClass = computed(() => {
  return `iconfont icon-${props.name}`;
});

const iconStyle = computed(() => {
  return {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color
  };
});
</script>

<style scoped>
.iconfont {
  display: inline-block;
  line-height: 1;
}
</style>
